<template>
    <div class="has_header">
      <Header></Header>
      <!--<div class="main_scroll">
        <div class="block_item" v-for="(item,index) in itemData01">
          <img class="cover" @click="toAreaDetail" :src="item.img"/>
          <div class="text">
            <p class="title"><span @click="toAreaDetail">{{item.title}}</span><img  src="../static/img/erji.png"/></p>
            <p class="dec" @click="toAreaDetail">{{item.dec}}</p>
          </div>
        </div>
      </div>-->
      <spotList></spotList>
      <div id="container1">

      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  import Header from './comment/header/header'
  import spotList from './comment/spotList/spotList'
  import imgSrc from '../static/img/erji.png'
  export default {
    components: {Header,spotList},
    name: "listOffline",
    data(){
      return{
        indexDB:null,
        curDb:null,
        itemData01:[
          {
            img:'http://images.decor01.com/Fqw4Jf4ykMp8myuhbKYGo3GMx8ds',
            title:'驰骋温泉11度假村',
            dec:'对于赤城温泉度假村你想说的故事是什么呢说的故事是什么呢说的故事是什么呢说的故事是什么呢？ ',
            zan:123,
            like:321,
            city:'武汉',
          },
          {
            img:'http://images.decor01.com/MJDecor1530774251401112672',
            title:'驰骋度假村',
            dec:'对于赤城温泉度假村你想说的故事是什么呢？ ',
            zan:123,
            like:1221,
            city:'北京',
          },
          {
            img:'http://images.decor01.com/Fqw4Jf4ykMp8myuhbKYGo3GMx8ds',
            title:'驰骋温泉度假村',
            dec:'对于赤城温泉度假村你想说的故事是什么呢？ ',
            zan:123,
            like:321,
            city:'杭州',
          },
        ],
      }
    },
    methods:{
      toAreaDetail(){
        this.$router.push('/areaDetail')
      },
      openDB(){
        this.indexDB = window.indexedDB;//window.indexedDB获取IDBFactory，打开数据库的工厂对象，用于创建或打开数据库，并管理数据库版本
        console.log(this.indexDB);
        let req = this.indexDB.open("myDB");
        console.log(req);
        //当数据打开失败时调用
        req.onerror = function(){

        }
        //当数据打开成功时调用
        req.onsuccess = function(){
          //在成功后对象的result属性为本次申请的结果
          this.curDb = req.result;//curDb为数据库对象，用来操作数据表，维护数据表
          console.log(this.curDb)

          //1 普通查找提供了get getAll来查询数据
          //get是根据id查询数据
          //getAll是查询全部数据
          //count方法来查找数据的数量
          //2.使用索引查找数据
          let tran = this.curDb.transaction(["offline"],"readwrite");
          console.log(tran)
          let objectStore = tran.objectStore("offline");
          console.log(objectStore)
          let item = {
            address: 'DEMO',
            advisor_phone: '男',
            create_time:'',
            id:'',
            locationCityId:'',
            modify_time:'',
            open_time_info:'',

          }
          var adduser = objectStore.add(item); // 为当前数据表增加记录
          console.log(adduser)
        }
        //当第一次创建数据库，或数据库升级时调用的事件
        //在创建或升级时，用来创建或修改数据表
        //只有在onupgradeneeded事件中，才能创建和维护数据表
        req.onupgradeneeded = function(){
          //创建表的结构
          let db = req.result;
          console.log(db)
          db.createObjectStore("offline",{
            //keyPath:,//无法与autoIncrement联合使用，自己设定的id字段的字段名
            autoIncrement:"user_id",//指明当前数据id自增长（indexdb）

          })
        }
      },
      //传入图片路径，返回base64
      getBase64(img){
        function getBase64Image(img,width,height) {//width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
          var canvas = document.createElement("canvas");
          canvas.width = width ? width : img.width;
          canvas.height = height ? height : img.height;

          var ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
          var dataURL = canvas.toDataURL();
          return dataURL;
        }
        var image = new Image();
        image.crossOrigin = 'Anonymous';
        image.src = img;
        var deferred=$.Deferred();
        if(img){
          image.onload =function (){
            deferred.resolve(getBase64Image(image));//将base64传给done上传处理
          }
          return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
        }
      },
      toBase64(imgUrl) {
        window.URL = window.URL || window.webkitURL;
        var xhr = new XMLHttpRequest();
        xhr.open("get", imgUrl, true);
        // 至关重要
        xhr.responseType = "blob";
        xhr.onload = function () {
          if (this.status == 200) {
            //得到一个blob对象
            var blob = this.response;
            console.log("blob", blob)
            // 至关重要
            let oFileReader = new FileReader();
            oFileReader.onloadend = function (e) {
              let base64 = e.target.result;
              console.log("方式一》》》》》》》》》", base64)
            };
            oFileReader.readAsDataURL(blob);
            //====为了在页面显示图片，可以删除====
            var img = document.createElement("img");
            img.onload = function (e) {
              window.URL.revokeObjectURL(img.src); // 清除释放
            };
            let src = window.URL.createObjectURL(blob);
            img.src = src
            document.getElementById("container1").appendChild(img);
            //====为了在页面显示图片，可以删除====

          }
        }
        xhr.send();
      }
  },
    mounted(){
      if(sessionStorage.getItem('lang')==='en_us'){
        this.$store.state.detailTitle = 'my download';
      }else {
        this.$store.state.detailTitle = '我的离线';
      }
      this.$store.state.showTab = false;
    },
    created(){
      this.openDB();
//      this.getBase64("http://p1.pstatp.com/large/435d000085555bd8de10")
//      this.getBase64('https://image-1257049018.cos.ap-guangzhou.myqcloud.com/image/beijing/beijing1.jpg')
//      this.getBase64('https://image-1257049018.cos.ap-guangzhou.myqcloud.com/image/wuhan/wuhan1.jpg')
//      this.getBase64('https://image-1257049018.cos.ap-guangzhou.myqcloud.com/image/wuhan/mulantianci/mulantianci1.jpg')
//        .then(function(base64){
//          console.log(base64);//处理成功打印在控制台
//        },function(err){
//          console.log(err);//打印异常信息
//        });
      this.toBase64('https://image-1257049018.cos.ap-guangzhou.myqcloud.com/image/wuhan/mulantianci/mulantianci1.jpg')
      this.toBase64('https://image-1257049018.cos.ap-guangzhou.myqcloud.com/image/beijing/beijing1.jpg')

    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .has_header
    padding-top 44px;
    height 100vh
    background #FAFAFA
  .main_scroll
    height 100%
    overflow auto
    padding-top 0.2rem
</style>
